<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="test">我是测试用的</div>
		<script src="js/vconsole.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 移动端事件
			 * 
			 * touchstart()：在屏幕上按下时触发
			 * 		事件对象
			 * 			e.touchs：记录用户用几个手指同时点击屏幕，以及他们点击的位置等等
			 * 			e.target:指向被点击的元素
			 * touchmove()：手指在屏幕上移动时触发
			 * 
			 * touchend()：当手指离开屏幕时触发
			 * 
			 * touchcancel()：当有高级事件(比如来电，信息)发生时会取消touch事件
			 * 
			 * 勾股定理：（指的是直角三角形的三边关系）
			 * 		直角边的平方和等于斜边的平方
			 * 
			 * */
			document.addEventListener("touchstart",function(e){
				e = window.event || e;
				console.log(e);
			})
			var test = document.querySelector(".test");
			test.addEventListener("touchstart",function(e){
				console.log(e.target);
			})
			
			test.addEventListener("touchmove",function(){
				console.log("我在屏幕上移动");
			})
			document.addEventListener("touchend",function(){
				console.log("手指离开了屏幕");
			})
		</script>
	</body>
</html>
